<template>
<div class="reg-bg">
 <div id="login-box" style="height: 400px;">
    <h3 style="color:#409EFF;margin:20px auto;font-weight:bold;font-size:20px;">用户注册</h3>

    <el-form ref="form" :model="form" :rules="rules" size="medium" style="width: 80%;margin:0 auto;">
      <el-form-item prop="name">
        <el-input round v-model="form.name" :validate-event="form.email==''?false:true" placeholder="用户名" prefix-icon="el-icon-user" ></el-input>
      </el-form-item>
      <el-form-item prop="mail" >
        <el-input round v-model="form.mail" placeholder="邮箱" prefix-icon="el-icon-message" ></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="form.pwd" placeholder="密码" show-password prefix-icon="el-icon-lock" ></el-input>
      </el-form-item>
      <el-form-item prop="pwd2">
        <el-input v-model="form.pwd2" placeholder="再次确认密码" show-password prefix-icon="el-icon-lock" ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button round type="primary" @click="onSubmit('form')" style="display: block;margin: 0px auto;font-size:15px;width:100%;">创建用户</el-button>
      </el-form-item>
    </el-form>

   <el-button round type="text" @click="toPageLogin"  style="display: block;margin: -10px auto;font-size:15px;font-weight:bold;">已有帐号，立即登录</el-button>
  </div>
</div>
 
</template>

<script>
import {reqLogin, reqRegister, uninameJudge} from "../../api";
import {mapActions,mapState} from 'vuex'
export default {
  name:'Register',
  data(){
    var checkname=(rule,value,callback)=>{
      if(value){
        if(!( /^[a-zA-Z0-9\u4e00-\u9fa5]+$/g.test(value))){
          callback(new Error("只能输入汉字、英文字母、阿拉伯数字"));
        } else {
          // 验证通过
          uninameJudge(value).then(res=>{
            console.log(res);
            const x=res.error_code;
            switch (x){
              case 0:callback();break;
              case 1:callback(new Error("格式错误"));break;
              case 2:callback(new Error("用户名已存在"));break;
              case -1:callback(new Error("未知错误"));
            }
          });
        }
      }
    }
    var checkpwd=(rule,value,callback)=>{
      if(value){
        if(!( /^[a-zA-Z0-9]+$/g.test(value))){
          callback(new Error("只能输入大小写字母或阿拉伯数字"));
        } else {
          var ls=0;
          if(value.match(/([a-z])+/)){ls++;}
          if(value.match(/([0-9])+/)){ls++;}
          if(value.match(/([A-Z])+/)){ls++;}
          if(ls<2){
            callback(new Error("必须包含大写字母、小写字母、阿拉伯数字中的两种"));
          }else{
            callback();
          }
        }
      }
    }
    var checkpwd2=(rule,value,callback)=>{
      if(value){
        if(value!=this.form.pwd){
          callback(new Error("两次输入密码不一致"))
        }else callback();
      }
    }
    return {
      form:{
        name:'',
        mail:'',
        pwd:'',
        pwd2:'',
      },
      rules:{
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min:2, max: 10, message: '不少于 2 个字符，不多于 10 个字符', trigger: 'blur' },
          { validator:checkname,trigger:['blur']}
        ],
        mail:[
          { required: true, message: '请输入邮箱以便日后找回密码', trigger: 'blur' },
          { type:'email',message:'邮箱格式不正确',trigger:['blur']}
        ],
        pwd:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          {min:6,max:20,message: '不少于 6 个字符，不多于 20 个字符', trigger: ['blur']},
          {validator:checkpwd,trigger: ['blur','change']}
        ],
        pwd2:[
          { required: true, message: '请再次确认密码', trigger: 'blur' },
          {validator:checkpwd2,trigger: ['blur','change']}
        ]
      },

    }

  },
  computed:{
    ...mapState(['uid'])
  },
  methods:{
    ...mapActions([
      'recordUid'
    ]),
    onSubmit:function (form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          reqRegister(this.form.mail,this.form.pwd,this.form.name).then(res=>{
            console.log(res);
            const userid=res.uid;
            switch (res.error_code){
              case 0:
                alert("注册成功，自动登录");
                this.recordUid(userid)
                console.log(this.uid)
                reqLogin(this.form.name,this.form.pwd);
                this.$router.replace('/manage');break;
              case 1: console.log("请求参数错误");break;
              case 2: alert("邮箱格式错误");break;
              case 3: alert("密码格式错误");break;
              case 4: alert("邮箱已被注册");break;
              case 5: alert("用户名格式错误");break;
              case 6: alert("用户名已存在");break;
              default:alert("系统错误");break;
            }
          })
        }else{
          return false;
        }
      })
    },
    toPageLogin:function (){
      this.$router.replace("login");
    }
  }

}

</script>
<style>
html,body{
  height: 100%;
  width:100%;
}

.reg-bg{
  height: 100%;
  background-image: url(../../../public/e.jpg);
}
#login-box{
  width:100%;
  width: 400px;
  height:400px;
  /*padding: 20px 20px 150px 20px;*/
  border-radius: 10%;
}
el-input{
  border-radius: 30%;
}
</style>